<template>
  <div class="hold-transition">
    <div class="content-header">
      <h1>统计分析<small>会员数量</small></h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>统计分析</el-breadcrumb-item>
        <el-breadcrumb-item>会员数量</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="block">
      <span class="demonstration">快捷选项</span>
      <el-date-picker
        v-model="value2"
        @change="dateChangebirthday1()"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      >
      </el-date-picker>
    </div>
    <div class="app-container">
      <div class="box">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="chart1" style="height: 600px"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      // value2: [new Date(2019, 10, 10, 10, 10), new Date(2020, 10, 11, 10, 10)],
      // value2: [new Date() - 1, new Date()],
      value2: "",
      // startTime: "",
      datalist: {
        yearAndMonth: [],
        memberCounts: [],
      },
    };
  },
  mounted: function () {
    this.handInfo();
    // var myChart = this.$echarts.init(document.getElementById("chart1"));
    // this.$http.post("api/report/getMemberCountAndYear").then((res) => {
    //   if (res.data.flag) {
    //     this.datalist.yearAndMonth = res.data.data.yearAndMonth;
    //     this.datalist.memberCounts = res.data.data.memberCounts;
    //     myChart.setOption({
    //       title: {
    //         text: "会员数量",
    //       },
    //       tooltip: {
    //         trigger: "axis",
    //         // formatter: [820, 932, 901, 934, 1290, 1330, 1320]
    //         formatter: this.datalist.memberCounts,
    //       },
    //       xAxis: {
    //         type: "category",
    //         // data: ["2020-6", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    //         data: this.datalist.yearAndMonth,
    //       },
    //       yAxis: {
    //         type: "value",
    //       },
    //       series: [
    //         {
    //           //   data: [820, 932, 901, 934, 1290, 1330, 1320],
    //           name: "会员数量",
    //           data: this.datalist.memberCounts,
    //           type: "line",
    //         },
    //       ],
    //     });
    //     this.$message.success(res.data.message);
    //   } else {
    //     this.$message.error(res.data.message);
    //   }
    // });
  },
  created() {
    //this.dateChangebirthday1();
  },
  methods: {
    dateChangebirthday1(list) {
      //选择了日期
      this.$http.post("api/report/getMemberCount", this.value2).then((res) => {
        if (res.data.flag) {
          this.datalist.yearAndMonth = res.data.data.yearAndMonth;
          this.datalist.memberCounts = res.data.data.memberCounts;
          list = this.datalist;
          this.echatOne(list);
          this.$message.success(res.data.message);
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handInfo() {
      this.$http.post("api/report/getMemberCountAndYear").then((res) => {
        if (res.data.flag) {
          this.datalist.yearAndMonth = res.data.data.yearAndMonth;
          this.datalist.memberCounts = res.data.data.memberCounts;

          this.echatOne(this.datalist);
          this.$message.success(res.data.message);
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    echatOne(list) {
      var myChart = this.$echarts.init(document.getElementById("chart1"));
      myChart.setOption({
        title: {
          text: "会员数量",
        },
        tooltip: {
          trigger: "axis",
          // formatter: [820, 932, 901, 934, 1290, 1330, 1320]
          formatter: list.memberCounts,
        },
        xAxis: {
          type: "category",
          // data: ["2020-6", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          data: list.yearAndMonth,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            name: "会员数量",
            data: list.memberCounts,
            type: "line",
          },
        ],
      });
    },
  },
};
</script>
